<template>
  <div class="wall-manage">
    <ContentWrap>
      <div class="page-header">
        <div class="header-left">
          <h1>公司公开墙</h1>
          <p>技术分享、商机信息、意见反馈的交流</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="openForm('create')" size="large">
            <Icon icon="ep:edit" />发布内容
          </el-button>
        </div>
      </div>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane
          v-for="dict in getIntDictOptions(DICT_TYPE.AGENT_WALL_MESSAGE_CATEGORY)"
          :key="dict.value"
          :label="dict.label"
          :name="dict.value"
        />
      </el-tabs>

      <div class="message-list" v-loading="loading">
        <div v-for="msg in list" :key="msg.id" class="message-item">
          <div class="message-avatar">
            <el-avatar :size="40">{{ msg.creator?.charAt(0) || 'U' }}</el-avatar>
          </div>
          <div class="message-content">
            <div class="message-header">
              <span class="author">{{ msg.creatorName || '匿名用户' }}</span>
              <span class="date">{{ formatDate(msg.createTime) }}</span>
              <dict-tag :type="DICT_TYPE.AGENT_WALL_MESSAGE_CATEGORY" :value="msg.category" />
            </div>
            <div class="message-text">{{ msg.content }}</div>
            <!-- <div class="message-meta">
              <span class="version">版本: {{ msg.version || 'v1.0.0' }}</span>
            </div> -->
            <div class="message-actions">
              <!-- <el-button size="small" text @click="likeMessage(msg)">
                <Icon icon="ep:thumb" />{{ msg.likes || 0 }}
              </el-button> -->
              <!-- <el-button size="small" text @click="replyMessage(msg)">
                <Icon icon="ep:chat-line-round" />回复
              </el-button> -->
              <el-button
                size="small"
                text
                type="primary"
                @click="openForm('update', msg.id)"
                v-hasPermi="['agent:wall-message:update']"
              >
                <Icon icon="ep:edit" />编辑
              </el-button>
              <el-button
                size="small"
                text
                type="danger"
                @click="handleDelete(msg.id!)"
                v-hasPermi="['agent:wall-message:delete']"
              >
                <Icon icon="ep:delete" />删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <WallMessageForm ref="formRef" @success="getList" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { WallMessageApi, type WallMessageVO } from '@/api/agent/manage/wallMessage'
import { formatDate } from '@/utils/formatTime'
import WallMessageForm from './WallMessageForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

defineOptions({ name: 'WallManage' })

const message = useMessage()
const { t } = useI18n()

const loading = ref(true)
const list = ref<WallMessageVO[]>([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  category: 1
})

const activeTab = ref(1)

const getList = async () => {
  loading.value = true
  try {
    const data = await WallMessageApi.getWallMessagePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const handleTabChange = (tabName: number) => {
  queryParams.category = tabName
  queryParams.pageNo = 1
  getList()
}

const likeMessage = async (msg: WallMessageVO) => {
  try {
    const updatedMessage: WallMessageVO = { ...msg, likes: (msg.likes || 0) + 1 }
    await WallMessageApi.updateWallMessage(updatedMessage)
    msg.likes = updatedMessage.likes
    message.success('点赞成功！')
  } catch (error) {
    console.error('点赞失败:', error)
    message.error('点赞失败')
  }
}

const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await WallMessageApi.deleteWallMessage(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch (error) {
    if (error === 'cancel') return
    console.error('删除消息失败:', error)
    message.error('删除消息失败')
  }
}



const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.wall-manage {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;

    .header-left {
      h1 {
        margin: 0 0 8px 0;
        font-size: 28px;
        font-weight: 600;
      }
      p {
        margin: 0;
        font-size: 16px;
        opacity: 0.9;
      }
    }

    .header-actions {
      .el-button {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        color: white;
        &:hover {
          background: rgba(255, 255, 255, 0.3);
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }

  .message-list {
    .message-item {
      display: flex;
      margin-bottom: 16px;
      padding: 16px;
      background: white;
      border-radius: 8px;
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;
      &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }
      .message-avatar {
        margin-right: 12px;
        flex-shrink: 0;
      }
      .message-content {
        flex: 1;
        min-width: 0;
        .message-header {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          gap: 8px;
          .author {
            font-weight: 600;
            color: #333;
          }
          .date {
            font-size: 12px;
            color: #666;
          }
        }
        .message-text {
          margin-bottom: 8px;
          line-height: 1.6;
          color: #333;
          word-break: break-word;
        }
        .message-meta {
          margin-bottom: 8px;
          font-size: 12px;
          color: #888;
        }
        .message-actions {
          display: flex;
          gap: 8px;
          .el-button {
            padding: 4px 8px;
            font-size: 12px;
            &:hover {
              background-color: #f0f0f0;
            }
          }
        }
      }
    }
    .load-more {
      text-align: center;
      margin-top: 20px;
    }
  }

  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }
  :deep(.el-tabs__nav-wrap) {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  :deep(.el-tabs__item) {
    font-weight: 500;
    &.is-active {
      color: #409eff;
    }
  }
  :deep(.el-avatar) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
  }
  :deep(.el-tag) {
    border-radius: 12px;
    font-size: 11px;
  }
}
</style>